<template>
  <view class="content">
    <view class="status_bar">
      <view class="top_view"></view>
    </view>
    
    <view class="search-box">
      <!-- mSearch组件 如果使用原样式，删除组件元素-->
      <mSearch
        :mode="2"
        button="inside"
        :placeholder="defaultKeyword"
        @search="doSearch(false)"
        @input="inputChange"
        @confirm="doSearch(false)"
        v-model="keyword"
      ></mSearch>
      <!-- 原样式 如果使用原样式，恢复下方注销代码 -->
      <!-- 			
			<view class="input-box">
				<input type="text" :placeholder="defaultKeyword" @input="inputChange" v-model="keyword" @confirm="doSearch(false)"
				 placeholder-class="placeholder-class" confirm-type="search">
			</view>
			<view class="search-btn" @tap="doSearch(false)">搜索</view> 
      -->
      <!-- 原样式 end -->
    </view>
    <view class="search-keyword" :style="style" @touchstart="blur">
      <scroll-view class="keyword-list-box" v-show="isShowKeywordList" scroll-y>
        <view
          class="keyword-entry"
          hover-class="keyword-entry-tap"
          v-for="row in keywordList"
          :key="row.keyword"
        >
          <view class="keyword-text" @tap="doSearch(row.keyword)">
            <rich-text :nodes="row.htmlStr"></rich-text>
          </view>
          <view class="keyword-img" @tap="setkeyword(row)">
            <image src="../../static/HM-search/back.png"></image>
          </view>
        </view>
      </scroll-view>
      <scroll-view class="keyword-box" v-show="!isShowKeywordList" scroll-y>
        <view class="keyword-block" v-if="oldKeywordList.length>0">
          <view class="keyword-list-header">
            <view>历史搜索</view>
            <view>
              <image @tap="oldDelete" src="../../static/HM-search/delete.png"></image>
            </view>
          </view>
          <view class="keyword">
            <view v-for="key in oldKeywordList" @tap="doSearch(key)" :key="key">{{key}}</view>
          </view>
        </view>
        <view class="keyword-block">
          <view class="keyword-list-header">
            <view>热门搜索</view>
            <view>
              <image @tap="hotToggle" :src="'../../static/HM-search/attention'+forbid+'.png'"></image>
            </view>
          </view>
          <view class="keyword" v-if="forbid==''">
            <view v-for="key in hotKeywordList" @tap="doSearch(key)" :key="key">{{key}}</view>
          </view>
          <view class="hide-hot-tis" v-else>
            <view>当前搜热门搜索已隐藏</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
//引用mSearch组件，如不需要删除即可
import mSearch from "@/components/mehaotian-search-revision.vue";
export default {
  data() {
    return {
      defaultKeyword: "",
      keyword: "",
      oldKeywordList: [],
      hotKeywordList: [],
      keywordList: [],
      forbid: "",
      isShowKeywordList: false
    };
  },
  onLoad() {
    this.init();
  },
  components: {
    //引用mSearch组件，如不需要删除即可
    mSearch
  },
   computed: { 
      style() {

    //     uni.getSystemInfo({
    //    success: function (res) {
    //     // console.log(JSON.stringify(res.model));
    //     // console.log(JSON.stringify(res.pixelRatio));
    //     // console.log(JSON.stringify(res.windowWidth));
    //     console.log(JSON.stringify(res.windowHeight));
    //     console.log(JSON.stringify(res.statusBarHeight));
    //     console.log(JSON.stringify(res.windowTop));
    //     // console.log(JSON.stringify(res.platform));
    //     var statusBarHeight = res.statusBarHeight
    // }
// })
      var systemInfo = uni.getSystemInfoSync();
       var systo =  uni.getSystemInfo()
      // console.log( JSON.stringify(systo));
   
          console.log(systemInfo.statusBarHeight);
          var statusBarHeight = systemInfo.statusBarHeight
      // if(systemInfo.platform =="android"){
        return `margin-top:${statusBarHeight+20}px`;
      // }else{
      //  return `height:${statusBarHeight}+44px`;
      // }
  
      
      // return `height:${systemInfo.statusBarHeight}px`;
  }},
  
  methods: {
    init() {
      this.loadDefaultKeyword();
      this.loadOldKeyword();
      this.loadHotKeyword();
    },
    blur() {
      uni.hideKeyboard();
    },
    //加载默认搜索关键字
    loadDefaultKeyword() {
      //定义默认搜索关键字，可以自己实现ajax请求数据再赋值,用户未输入时，以水印方式显示在输入框，直接不输入内容搜索会搜索默认关键字
      this.defaultKeyword = "默认关键字";
    },
    //加载历史搜索,自动读取本地Storage
    loadOldKeyword() {
      uni.getStorage({
        key: "OldKeys",
        success: res => {
          var OldKeys = JSON.parse(res.data);
          this.oldKeywordList = OldKeys;
        }
      });
    },
    //加载热门搜索
    loadHotKeyword() {
      //定义热门搜索关键字，可以自己实现ajax请求数据再赋值
      this.hotKeywordList = [
        "键盘",
        "鼠标",
        "显示器",
        "电脑主机",
        "蓝牙音箱",
        "笔记本电脑",
        "鼠标垫",
        "USB",
        "USB3.0"
      ];
    },
    //监听输入
    inputChange(event) {
      //兼容引入组件时传入参数情况
      var keyword = event.detail ? event.detail.value : event;
      if (!keyword) {
        this.keywordList = [];
        this.isShowKeywordList = false;
        return;
      }
      this.isShowKeywordList = true;
      //以下示例截取淘宝的关键字，请替换成你的接口
      uni.request({
        url: "https://suggest.taobao.com/sug?code=utf-8&q=" + keyword, //仅为示例
        success: res => {
          this.keywordList = this.drawCorrelativeKeyword(
            res.data.result,
            keyword
          );
        }
      });
    },
    //高亮关键字
    drawCorrelativeKeyword(keywords, keyword) {
      var len = keywords.length,
        keywordArr = [];
      for (var i = 0; i < len; i++) {
        var row = keywords[i];
        //定义高亮#9f9f9f
        var html = row[0].replace(
          keyword,
          "<span style='color: #9f9f9f;'>" + keyword + "</span>"
        );
        html = "<div>" + html + "</div>";
        var tmpObj = {
          keyword: row[0],
          htmlStr: html
        };
        keywordArr.push(tmpObj);
      }
      return keywordArr;
    },
    //顶置关键字
    setkeyword(data) {
      this.keyword = data.keyword;
    },
    //清除历史搜索
    oldDelete() {
      uni.showModal({
        content: "确定清除历史搜索记录？",
        success: res => {
          if (res.confirm) {
            console.log("用户点击确定");
            this.oldKeywordList = [];
            uni.removeStorage({
              key: "OldKeys"
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        }
      });
    },
    //热门搜索开关
    hotToggle() {
      this.forbid = this.forbid ? "" : "_forbid";
    },
    //执行搜索
    doSearch(key) {
      key = key ? key : this.keyword ? this.keyword : this.defaultKeyword;
      this.keyword = key;
      this.saveKeyword(key); //保存为历史
      uni.showToast({
        title: key,
        icon: "none",
        duration: 2000
      });
      //以下是示例跳转淘宝搜索，可自己实现搜索逻辑
      //#ifdef APP-PLUS
      plus.runtime.openURL(encodeURI("taobao://s.taobao.com/search?q=" + key));
      //#endif
      //#ifdef H5
      window.location.href = "taobao://s.taobao.com/search?q=" + key;
      //#endif
    },
    //保存关键字到历史记录
    saveKeyword(keyword) {
      uni.getStorage({
        key: "OldKeys",
        success: res => {
          console.log(res.data);
          var OldKeys = JSON.parse(res.data);
          var findIndex = OldKeys.indexOf(keyword);
          if (findIndex == -1) {
            OldKeys.unshift(keyword);
          } else {
            OldKeys.splice(findIndex, 1);
            OldKeys.unshift(keyword);
          }
          //最多10个纪录
          OldKeys.length > 10 && OldKeys.pop();
          uni.setStorage({
            key: "OldKeys",
            data: JSON.stringify(OldKeys)
          });
          this.oldKeywordList = OldKeys; //更新历史搜索
        },
        fail: e => {
          var OldKeys = [keyword];
          uni.setStorage({
            key: "OldKeys",
            data: JSON.stringify(OldKeys)
          });
          this.oldKeywordList = OldKeys; //更新历史搜索
        }
      });
    }
  }
};
</script>
<style>
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}
.top_view {
  height: var(--status-bar-height);
  width: 100%;
  position: fixed;
  top: 0;
}
.search-box {
  width: 95%;
  background-color: rgb(242, 242, 242);
  height: 30px;
  padding: 7.5px 2.5%;
  display: flex;
  justify-content: space-between;

  position: fixed;
  top: 50px;
  z-index: 9;
}
.search-box .input-box {
  width: 85%;
  flex-shrink: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-box .search-btn {
  width: 15%;
  margin: 0 0 0 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(to right, #ff9801, #ff570a);
  border-radius: 30px;
}
.search-box .input-box > input {
  width: 100%;
  height: 30px;
  font-size: 16px;
  border: 0;
  border-radius: 30px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0 3%;
  margin: 0;
  background-color: #ffffff;
}
.placeholder-class {
  color: #9e9e9e;
}
.search-keyword {
  width: 100%;
  background-color: rgb(242, 242, 242);
  /* lmqadd */
  /* margin-top: 160px;  */
}
.keyword-list-box {
  height: calc(100vh - 55px);
  padding-top: 5px;
  border-radius: 10px 10px 0 0;
  background-color: #fff;
}
.keyword-entry-tap {
  background-color: #eee;
}
.keyword-entry {
  width: 94%;
  height: 40px;
  margin: 0 3%;
  font-size: 15px;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 1px #e7e7e7;
}
.keyword-entry image {
  width: 30px;
  height: 30px;
}
.keyword-entry .keyword-text,
.keyword-entry .keyword-img {
  height: 40px;
  display: flex;
  align-items: center;
}
.keyword-entry .keyword-text {
  width: 90%;
}
.keyword-entry .keyword-img {
  width: 10%;
  justify-content: center;
}
.keyword-box {
  height: calc(100vh - 55px);
  border-radius: 10px 10px 0 0;
  background-color: #fff;
}
.keyword-box .keyword-block {
  padding: 5px 0;
}
.keyword-box .keyword-block .keyword-list-header {
  width: 94%;
  padding: 5px 3%;
  font-size: 13.5px;
  color: #333;
  display: flex;
  justify-content: space-between;
}
.keyword-box .keyword-block .keyword-list-header image {
  width: 20px;
  height: 20px;
}
.keyword-box .keyword-block .keyword {
  width: 94%;
  padding: 3px 3%;
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
}
.keyword-box .keyword-block .hide-hot-tis {
  display: flex;
  justify-content: center;
  font-size: 14px;
  color: #6b6b6b;
}
.keyword-box .keyword-block .keyword > view {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  padding: 0 10px;
  margin: 5px 10px 5px 0;
  height: 30px;
  font-size: 14px;
  background-color: rgb(242, 242, 242);
  color: #6b6b6b;
}
</style>
